<template>
    <el-tabs type="border-card" width="500px" class="demo-tabs">
        <el-tab-pane label="全部">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header2" width="100%" style="text-align:left">
                        <span>订单详情</span>
                    </div>
                </template>
                <div>
                    <el-table :data="myOrder" style="width: 100%" height="430">
                        <!-- 表格 -->
                        <!-- 展开行内容 -->
                        <el-table-column type="expand" width="30%">
                            <template #default="props">
                                <el-descriptions class="descriptions" :column="3" style="width: 85%" border>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                联系方式
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.name }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.telephone }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.reserveDate">{{
                                            props.row.reserveDate }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务地点
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.serviceAddress">{{
                                            props.row.serviceAddress }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                下单时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderDate }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderTime }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                受理时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.orderState === 2">{{
                                            props.row.acceptDate }}</el-tag>
                                        <el-tag style="margin-right: 2px" v-if="props.row.orderState === 2"> {{
                                            props.row.acceptTime }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class=" cell-item">
                                                完成时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 5px" v-if="props.row.orderState === 3">{{
                                            props.row.finishDate }}</el-tag>
                                        <el-tag style="margin-right: 5px" v-if="props.row.orderState === 3">{{
                                            props.row.finishTime }}</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>

                        <el-table-column prop="typeId" label="服务类别" width="200%">
                            <template #default="scope">
                                {{ scope.row.typeB.serviceName }}/{{ scope.row.typeS.serviceName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDetail" label="订单详情" width="120%" />
                        <el-table-column prop="manager" label="受理人" width="165%">
                            <template #default="scope">
                                <p v-if="scope.row.manager">{{ scope.row.manager.name }} {{ scope.row.manager.telephone
                                    }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fff" label="服务人员" width="160%">
                            <template #default="scope">
                                {{ scope.row.name }} {{ scope.row.telephone }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDate" label="下单时间" sortable width="120%" />
                        <el-table-column prop="orderState" label="订单状态">
                            <template #default="scope">
                                <p v-if="scope.row.orderState == '0'" style="color: #ffa500">待受理</p>
                                <p v-if="scope.row.orderState == '1'" style="color: #ff0000">已取消</p>
                                <p v-if="scope.row.orderState == '2'" style="color: #67c23a">待完成</p>
                                <p v-if="scope.row.orderState == '3'" style="color: #FF4500">待评分</p>
                                <p v-if="scope.row.orderState == '4'" style="color: #67c23a">已完成</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="110%">
                            <template #default="scope">
                                <el-popconfirm width="180" confirm-button-text="确定" cancel-button-text="取消"
                                    :icon="InfoFilled" icon-color="#626AEF" :title="'确定要取消预约吗?'"
                                    @confirm="toCancel(scope.$index, scope.row)">
                                    <template #reference>
                                        <el-button size="small" type="primary"
                                            v-if="scope.row.orderState == '0'">取消预约</el-button>
                                    </template>
                                </el-popconfirm>
                                <el-button v-if="scope.row.orderState == '1'" size="small" type="primary"
                                    disabled>已&ensp;取&ensp;消</el-button>
                                <el-popconfirm width="200" confirm-button-text="确定" cancel-button-text="取消"
                                    :icon="InfoFilled" icon-color="#626AEF" :title="'确定要确认完成服务吗?'"
                                    @confirm="toConfirm(scope.$index, scope.row)">
                                    <template #reference>
                                        <el-button size="small" type="primary"
                                            v-if="scope.row.orderState == '2'">确认完成</el-button>
                                    </template>
                                </el-popconfirm>
                                <el-popover placement="bottom" :width="100" trigger="click"
                                    :visible.sync="scope.row.popVisible">
                                    <template #reference>
                                        <el-button size="small" type="primary" v-if="scope.row.orderState == '3'"
                                            @click="showPopover(scope.row)">&emsp;评分&emsp;</el-button>
                                    </template>
                                    <el-rate v-model="scope.row.rate" allow-half clearable
                                        @change="toRate(scope.$index, scope.row)" />
                                </el-popover>
                                <el-button v-if="scope.row.orderState == '4'" size="small" type="primary"
                                    disabled>服务已完成</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="待受理">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header2" width="100%" style="text-align:left">
                        <span>订单详情</span>
                    </div>
                </template>
                <div>
                    <el-table :data="noAcceptData" style="width: 100%" height="430">
                        <!-- 展开行内容 -->
                        <el-table-column type="expand" width="30%">
                            <template #default="props">
                                <el-descriptions class="descriptions" :column="3" style="width: 85%" border>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                联系方式
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.name }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.telephone }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.reserveDate">{{
                                            props.row.reserveDate }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务地点
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.serviceAddress">{{
                                            props.row.serviceAddress }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                下单时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderDate }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderTime }}</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>

                        <el-table-column prop="typeId" label="服务类别">
                            <template #default="scope">
                                {{ scope.row.typeB.serviceName }}-{{ scope.row.typeS.serviceName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDetail" label="订单详情" />
                        <el-table-column prop="orderDate" label="下单时间" sortable />
                        <el-table-column prop="orderState" label="订单状态">
                            <template #default="scope">
                                <p style="color: #ffa500">待受理</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="120px">
                            <template #default="scope">
                                <el-popconfirm width="180" confirm-button-text="确定" cancel-button-text="取消"
                                    :icon="InfoFilled" icon-color="#626AEF" :title="'确定要取消预约吗?'"
                                    @confirm="toCancel(scope.$index, scope.row)">
                                    <template #reference>
                                        <el-button size="small" type="primary"
                                            v-if="scope.row.orderState == '0'">取消预约</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="待完成">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header2" width="100%" style="text-align:left">
                        <span>订单详情</span>
                    </div>
                </template>
                <div>
                    <el-table :data="noFinishData" style="width: 100%" height="430">
                        <!-- 展开行内容 -->
                        <el-table-column type="expand" width="30%">
                            <template #default="props">
                                <el-descriptions class="descriptions" :column="3" style="width: 85%" border>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                联系方式
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.name }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.telephone }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.reserveDate">{{
                                            props.row.reserveDate }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务地点
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.serviceAddress">{{
                                            props.row.serviceAddress }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                下单时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderDate }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderTime }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                受理时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.orderState === 2">{{
                                            props.row.acceptDate }}</el-tag>
                                        <el-tag style="margin-right: 2px" v-if="props.row.orderState === 2"> {{
                                            props.row.acceptTime }}</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>

                        <el-table-column prop="typeId" label="服务类别" width="200%">
                            <template #default="scope">
                                {{ scope.row.typeB.serviceName }}/{{ scope.row.typeS.serviceName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDetail" label="订单详情" width="120%" />
                        <el-table-column prop="manager" label="受理人" width="165%">
                            <template #default="scope">
                                <p v-if="scope.row.manager">{{ scope.row.manager.name }} {{ scope.row.manager.telephone
                                    }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fff" label="服务人员" width="160%">
                            <template #default="scope">
                                {{ scope.row.name }} {{ scope.row.telephone }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDate" label="下单时间" sortable width="120%" />
                        <el-table-column prop="orderState" label="订单状态">
                            <template #default="scope">
                                <p style="color: #67c23a">待完成</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="120px">
                            <template #default="scope">
                                <el-popconfirm width="200" confirm-button-text="确定" cancel-button-text="取消"
                                    :icon="InfoFilled" icon-color="#626AEF" :title="'确定要确认完成服务吗?'"
                                    @confirm="toConfirm(scope.$index, scope.row)">
                                    <template #reference>
                                        <el-button size="small" type="primary"
                                            v-if="scope.row.orderState == '2'">确认完成</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="待评价">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header2" width="100%" style="text-align:left">
                        <span>订单详情</span>
                    </div>
                </template>
                <div>
                    <el-table :data="noReviewData" style="width: 100%" height="430">
                        <!-- 展开行内容 -->
                        <el-table-column type="expand" width="30%">
                            <template #default="props">
                                <el-descriptions class="descriptions" :column="3" style="width: 85%" border>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                联系方式
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.name }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.user.telephone }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.reserveDate">{{
                                            props.row.reserveDate }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                服务地点
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px" v-if="props.row.serviceAddress">{{
                                            props.row.serviceAddress }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                下单时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderDate }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.orderTime }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                受理时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 2px">{{ props.row.acceptDate }}</el-tag>
                                        <el-tag style="margin-right: 2px">{{ props.row.acceptTime }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                完成时间
                                            </div>
                                        </template>
                                        <el-tag style="margin-right: 5px">{{ props.row.finishDate }}</el-tag>
                                        <el-tag style="margin-right: 5px">{{ props.row.finishTime }}</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>

                        <el-table-column prop="typeId" label="服务类别" width="200%">
                            <template #default="scope">
                                {{ scope.row.typeB.serviceName }}/{{ scope.row.typeS.serviceName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDetail" label="订单详情" width="120%" />
                        <el-table-column prop="manager" label="受理人" width="165%">
                            <template #default="scope">
                                <p v-if="scope.row.manager">{{ scope.row.manager.name }} {{ scope.row.manager.telephone
                                    }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fff" label="服务人员" width="160%">
                            <template #default="scope">
                                {{ scope.row.name }} {{ scope.row.telephone }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderDate" label="下单时间" sortable width="120%" />
                        <el-table-column prop="orderState" label="订单状态">
                            <template #default="scope">
                                <p style="color: #67c23a">待评分</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="120px">
                            <template #default="scope">
                                <el-popover placement="bottom" :width="100" trigger="click"
                                    :visible.sync="scope.row.popVisible">
                                    <template #reference>
                                        <el-button size="small" type="primary" v-if="scope.row.orderState == '3'"
                                            @click="showPopover(scope.row)">&emsp;评分&emsp;</el-button>
                                    </template>
                                    <el-rate v-model="scope.row.rate" allow-half clearable
                                        @change="toRate(scope.$index, scope.row)" />
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { storeToRefs } from "pinia";
import { useServiceorderStore } from '../../../stores/serviceorder';
const serviceOrderStore = useServiceorderStore()
const { myOrder, noAcceptData, noFinishData, noReviewData } = storeToRefs(serviceOrderStore)
serviceOrderStore.loadByUid()
serviceOrderStore.getNoAccept()
serviceOrderStore.getNoFinish()
serviceOrderStore.getNoReview()
//取消订单
const toCancel = (index, row) => {
    serviceOrderStore.updateState(index, row)
}
//确认完成
const toConfirm = (index, row) => {
    serviceOrderStore.updateFrom.finishDate = serviceOrderStore.updateDate()
    serviceOrderStore.updateFrom.finishTime = serviceOrderStore.updateTime()
    console.log(serviceOrderStore.updateFrom);
    serviceOrderStore.updateState(index, row)
}
//评分
// const value = ref()
// const visible = ref(false)
// 初始化函数，用于给每个订单添加 rateValue 和 popoverVisible 属性  
const initializeOrderProperties = (orders) => {
    // 遍历数组  
    orders.forEach((order) => {
        //order 对象没有 popoverVisible 属性，则添加它  
        // if (!order.hasOwnProperty('popVisible')) {
        order.popVisible = false; // 或者其他默认值  
        // }
    });
}
onMounted(() => {
    initializeOrderProperties(serviceOrderStore.myOrder)
    console.log(serviceOrderStore.myOrder);
})
const showPopover = (row) => {
    row.popVisible = true
}
const toRate = (index, row) => {
    console.log(row.rate);
    serviceOrderStore.updateFrom.rate = row.rate
    console.log(serviceOrderStore.updateFrom);
    serviceOrderStore.updateState(index, row)
    row.popVisible = false
}
</script>

<style scoped>
.demo-tabs {
    height: 85vh;
}

.box-card {
    height: 100%;
}

.cell-item {
    display: flex;
    align-items: center;
}
</style>